<template>
<div>
    <el-input v-model="input" placeholder="请输入内容" @change="getDaa"></el-input>
  <div class="map-area" :id="mapId"></div>
</div>
</template>
<script>
import loadBMap from '../../utils/loadBMap'
import axiso from '../../utils/axios2'
export default {
  props: {
    name: {
      type: String
    }
  },
  data () {
    return {
      mapId: 'BMap-' + parseInt(Date.now() + Math.random()),
      myMap: null,
      input: '台江万达',

      // 其他
      mixinViewModuleOptions: {
        getDataListURL: '/place/v2/suggestion'
      },
      dataListLoading: false,
      allocUpdateVisible: false,
      daterange: null,
      dataList: [],
      lnglats: [],
      value: '',
      add: '',
      index: 0,
      myGeo: '',
      map: '',
      pointId: [],
      newArr: [],
      coordinateList: [],
      objData: [],
      objectData: {},
      adds: [{ id: 12, operationAddress: '台江万达' }],
      addsId: [],
      coordinate: {
        pointId: '',
        addsId: ''
      }
    }
  },
  mounted () {
    this.initMap()
    // this.getAllocaData()
  },
  methods: {
    getDaa () {
      let addss = {
        id: 13,
        operationAddress: this.input
      }
      this.adds.push(addss)
      console.log(this.adds)
      this.initMap()
    },
    initMap () {
      loadBMap('5qOlRG5LXn2xbzMOfO8QTVoRplcD522a')
        .then(BMap => {
          // 百度地图API功能
          this.myMap = new BMap.Map(this.mapId) // 创建Map实例
          // this.myMap.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别
          this.myMap.centerAndZoom('福州', 12) // 初始化地图,设置中心点坐标和地图级别
          // 添加地图类型控件
          this.myMap.addControl(
            new BMap.MapTypeControl({
              mapTypes: [window.BMAP_NORMAL_MAP, window.BMAP_HYBRID_MAP]
            })
          )
          this.myMap.setCurrentCity('福州') // 设置地图显示的城市 此项是必须设置的
          this.myMap.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
          this.myGeo = new BMap.Geocoder() // 获取什么?
          // console.log(this.myGeo)
          this.bdGEO()
        })
        .catch(() => {
          console.log('地图加载失败')
        })
    },

    // 获取后台返回的数据吧??其他
    getAllocaData () {
      let that = this
      that.dataListLoading = true
      axiso
        .get(that.mixinViewModuleOptions.getDataListURL, {
          params: {
            query: '台江区',
            region: '福州',
            city_limit: 'true',
            output: 'json',
            ak: '5qOlRG5LXn2xbzMOfO8QTVoRplcD522a'
          }
        })
        .then(({ data: res }) => {
          console.log(res)
          that.dataListLoading = false
          if (res.code !== 0) {
            return that.$message.error(res.msg)
          }
          that.adds = res.data
          // that.shaowMap()
        })
        .catch(() => {
          that.dataListLoading = false
        })
    },

    shaowMap () {
      /* global BMap */
      this.map = new BMap.Map('allmap') // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(121.427435, 28.662194), 8)
      this.map.enableScrollWheelZoom(true)
      this.myGeo = new BMap.Geocoder()
      this.bdGEO()
    },

    bdGEO () {
      if (this.adds[this.index]) {
        this.add = this.adds[this.index].operationAddress // '台江区'

        this.geocodeSearch(this.add, this.adds[this.index].id)
        this.index++
      } else {
        console.log('暂无点')
      }
    },
    geocodeSearch (add, id) {
      this.map = this.myMap
      let that = this
      if (that.index <= that.adds.length) {
        setTimeout(that.bdGEO, 100)
      }
      // 将地址解析结果显示在地图上，并调整地图视野
      that.myGeo.getPoint(
        add,
        function (point) {
          console.log(point)
          // lat: 26.05852815064472
          // lng: 119.32052821101611
          if (point) {
            // 创建一个图像标注实例。point参数指定了图像标注所在的地理位置
            // point: Point, opts: MarkerOptions
            var marker = new BMap.Marker(point)
            that.map.addOverlay(marker) // 当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件
            var opts = {
              position: point, // 指定文本标注所在的地理位置
              offset: new BMap.Size(1, -50) // 设置文本偏移量
            }
            var label = new BMap.Label(add, opts) // 创建文本标注对象
            label.setStyle({
              color: 'red',
              fontSize: '15px',
              height: '20px',
              lineHeight: '20px',
              border: 'none'
            })
            that.map.addOverlay(label)

            marker.addEventListener('click', function () {
              // 点击标注点获取经纬度
              that.coordinate.pointId = point
              that.coordinate.addsId = id
              console.log(point)
              if (that.newArr.length === 0) {
                that.newArr.push(that.coordinate.addsId)
                that.pointId.push(that.coordinate.pointId.lat)
                that.coordinateList.push(that.coordinate.pointId.lng)
              } else {
                let counts = 0
                for (let i = 0; i < that.newArr.length; i++) {
                  if (that.newArr[i] === that.coordinate.addsId) {
                    console.log(1)
                  } else {
                    counts++
                  }
                }
                if (counts === that.newArr.length) {
                  that.newArr.push(that.coordinate.addsId)
                  that.pointId.push(that.coordinate.pointId.lat)
                  that.coordinateList.push(that.coordinate.pointId.lng)
                } else {
                  that.$message.error('该地点已选择')
                }
              }
              for (let i = 0; i < that.newArr.length; i++) {
                that.objectData = {
                  id: that.newArr[i],
                  lat: that.pointId[i],
                  lng: that.coordinateList[i]
                }
              }
              that.objData.push(that.objectData)
            })
          } else {
            console.log('您选择地址没有解析到结果!')
          }
        },
        '福州市'
      )
    }
  }
}
</script>
<style scoped>
.map-area {
  width: 100%;
  height: 500px;
}
</style>
